import PageHeader from "@/components/Frame/PageHeader";
import { defineComponent } from "vue";
import { useRoute } from "vue-router";
import DialogBox from "../../../../components/DialogBox";
import { showTips } from "../../../../utils/util";
import { RuleCascade } from "../interface";
import "./cascadeDetail.scss";
export default defineComponent({
	emits: [],
	setup() {
		const route = useRoute();
		onMounted(() => {
			console.log(route.query.id);
			state.detail = {
				name: "下班的节能场景"
			};
		});
		let state = reactive({
			//规则基本信息
			detail: {} as any,
			//配置规则的数据源
			dataSource: {
				trigger: [
					{ label: "数据变化", value: "device" },
					{ label: "定时执行", value: "cron" },
					{ label: "一键执行", value: "simple" }
				],
				filter: [
					{ label: "变量条件", value: "data" },
					{ label: "周期条件", value: "time" }
				],
				action: [
					{ label: "设备操作", value: "call" },
					{ label: "修改数据", value: "data" }
				]
			},
			//提交的参数
			params: {
				trigger: [] as RuleCascade.Tigger[],
				filter: [] as RuleCascade.Filter[],
				action: [] as RuleCascade.Action[]
			}
		});
		const basicDialog = reactive({
			visible: false
		});
		const updateBasic = () => {
			//修改基本信息
			basicDialog.visible = false;
			showTips(200, "修改场景");
		};
		const submitCascade = () => {
			//修改基本信息
			basicDialog.visible = false;
			showTips(200, "修改场景联动");
		};
		return () => {
			return (
				<div class="">
					<DialogBox width="550px" v-model:visible={basicDialog.visible} title="修改场景" onConfirm={updateBasic}>
						<el-input v-model={state.detail.name} />
					</DialogBox>
					<PageHeader
						v-slots={{
							operate: () => {
								return (
									<>
										<el-button type="primary" class="ml-4 mt-1" onClick={submitCascade}>
											保存
										</el-button>
									</>
								);
							}
						}}
					>
						<div>
							<span>{state.detail.name}</span>
							<el-link type="primary" class="ml-4 mt-1" onClick={() => (basicDialog.visible = true)}>
								编辑
							</el-link>
						</div>
					</PageHeader>
					<div class="data-container trigger" style="line-height:24px">
						<div class="tips">当</div>
						<div class="flex">
							<div class="label-text">触发规则</div>
						</div>
						<div class="pt-4">
							<el-alert type="info">
								<i class="iconfont iconinfo mr-2" />
								<span>
									触发该联动的条件，可设置为设备触发或定时触发。当设备上报的数据或当前时间满足设定的触发器时，触发执行条件判断。可以为一个规则创建
									<span class="text-red-500">多个</span>触发器，
								</span>
								<span class="text-red-500">触发器之间是或（or）关系</span>。
							</el-alert>
						</div>
						{state.params.trigger.map((item: RuleCascade.Tigger, index: number) => {
							return (
								<div class="flex">
									<div class={["pt-4", "item", index == 0 ? "mt-4 first" : ""]}>
										<div class="pr-4">
											<el-link type="danger" onClick={() => state.params.trigger.splice(index, 1)}>
												移除
											</el-link>
										</div>
										<el-select v-model={item.type} class="w-40">
											{state.dataSource.trigger.map(item => {
												return <el-option label={item.label} value={item.value}></el-option>;
											})}
										</el-select>

										{item.type == "device" ? (
											<>
												<el-select v-model={item.targetType} class="w-40">
													<el-option label="产品" value="product"></el-option>
													<el-option label="设备" value="device"></el-option>
												</el-select>
												{item.targetType == "device" ? (
													<el-select v-model={item.target}>
														<el-option label="设备1001" value="01"></el-option>
														<el-option label="设备1002" value="02"></el-option>
													</el-select>
												) : null}
												<el-select v-model={item.param}>
													<el-option label="温度" value="temp"></el-option>
													<el-option label="湿度" value="hmp"></el-option>
												</el-select>
											</>
										) : (
											<el-input v-model={item.target} placeholder="每天下午 20:30" style="width:428px"></el-input>
										)}
									</div>
								</div>
							);
						})}

						<el-link class="mt-4" type="primary" onClick={() => state.params.trigger.push({ type: "device" })}>
							新增
						</el-link>
					</div>

					<div class="data-container filter mt-4" style="line-height:24px">
						<div class="tips">满足条件</div>
						<div class="flex">
							<div class="label-text">执行条件</div>
						</div>
						<div class="pt-4">
							<el-alert type="info">
								<i class="iconfont iconinfo mr-2" />
								<span>
									只有满足过滤器条件的数据，才能触发执行动作。可设置为设备状态或时间范围。可以为一个规则创建多个执行条件，
									<span class="text-red-500">执行条件之间是并且（and）关系</span>。
								</span>
							</el-alert>
						</div>
						{state.params.filter.map((item: RuleCascade.Filter, index: number) => {
							return (
								<div class="flex">
									<div class={["pt-4", "item", index == 0 ? "mt-4 first" : ""]}>
										<div class="pr-4">
											<el-link type="danger" onClick={() => state.params.filter.splice(index, 1)}>
												移除
											</el-link>
										</div>
										<el-select v-model={item.type} class="w-40">
											{state.dataSource.filter.map(item => {
												return <el-option label={item.label} value={item.value}></el-option>;
											})}
										</el-select>
										{item.type == "data" ? (
											<>
												<el-select v-model={item.target} class="w-40">
													<el-option label="温度" value="<"></el-option>
													<el-option label="湿度" value="<="></el-option>
												</el-select>
												<el-select v-model={item.condition} class="w-40">
													<el-option label="小于" value="<"></el-option>
													<el-option label="小等于" value="<="></el-option>
													<el-option label="等于" value="="></el-option>
													<el-option label="大等于" value=">"></el-option>
													<el-option label="大于" value=">="></el-option>
												</el-select>
												<el-input v-model={item.param} placeholder="" style="width:auto"></el-input>
											</>
										) : (
											<el-date-picker
												v-model={item.param}
												type="datetimerange"
												range-separator="至"
												start-placeholder="开始时间"
												end-placeholder="结束时间"
											/>
										)}
									</div>
								</div>
							);
						})}

						<el-link class="mt-4" type="primary" onClick={() => state.params.filter.push({ type: "data" })}>
							新增
						</el-link>
					</div>

					<div class="data-container filter mt-4" style="line-height:24px">
						<div class="tips">执行动作</div>
						<div class="flex">
							<div class="label-text">执行动作</div>
						</div>
						<div class="pt-4">
							<el-alert type="info">
								<i class="iconfont iconinfo mr-2" />
								<span>该条规则触发后最终执行的动作。可以设置多个动作，某一动作执行失败时，不影响其他动作的执行。</span>
							</el-alert>
						</div>
						{state.params.action.map((item: RuleCascade.Action, index: number) => {
							return (
								<div class="flex">
									<div class={["pt-4", "item", index == 0 ? "mt-4 first" : ""]}>
										<div class="pr-4">
											<el-link type="danger" onClick={() => state.params.action.splice(index, 1)}>
												移除
											</el-link>
										</div>
										<el-select v-model={item.type} class="w-40">
											{state.dataSource.action.map(item => {
												return <el-option label={item.label} value={item.value}></el-option>;
											})}
										</el-select>
										<el-select v-model={item.target} class="w-40">
											<el-option label="设备1001" value="1001"></el-option>
											<el-option label="设备1002" value="1002"></el-option>
										</el-select>
										{item.type == "call" ? (
											<el-select v-model={item.func} class="w-40">
												<el-option label="关机" value="shutdown"></el-option>
												<el-option label="重启" value="reboot"></el-option>
											</el-select>
										) : (
											<>
												<el-select v-model={item.sensor} class="w-40">
													<el-option label="温度" value="temp"></el-option>
													<el-option label="湿度" value="hmp"></el-option>
												</el-select>
												<el-input v-model={item.param} placeholder="" style="width:auto"></el-input>
											</>
										)}
									</div>
								</div>
							);
						})}

						<el-link class="mt-4" type="primary" onClick={() => state.params.action.push({ type: "call" })}>
							新增
						</el-link>
					</div>
				</div>
			);
		};
	}
});
